<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
import { useModuleData } from './useModuleData'
import { vModuleDrag } from './vModuleDrag'
import { DragType } from './types'

import ModuleList from './ModuleList.vue'
import ModuleConsole from './ModuleConsole.vue'
import ModulePuzzlePanel from './ModulePuzzlePanel.vue'

import enUS from './locales/en-US.json' with { type: 'json' }
import zhCN from './locales/zh-CN.json' with { type: 'json' }
import { defineMessage } from '@/locales'

useI18n({ useScope: 'local', messages: defineMessage(enUS, zhCN) })
const { arrowData, checkModule, debuggerInfo, moduleData } = useModuleData()
</script>

<template>
  <div class="rounded flex-1 overflow-hidden flex flex-col">
    <div v-module-drag="moduleData" class="flex-1 rounded overflow-hidden h-full flex gap-x-1">
      <div
        :data-type="DragType.ModuleSourceContainer"
        class="px-1 grid-row-end-[span_3] bg-arco-2 overflow-auto scrollbar-slim"
      >
        <ModuleList :moduleSourceList="moduleData.moduleSourceList" />
      </div>
      <div class="flex-1 flex flex-col gap-y-1 overflow-hidden">
        <ModulePuzzlePanel
          :arrowData="arrowData"
          :moduleSlots="moduleData.moduleSlots"
          class="overflow-auto scrollbar-slim bg-arco-2 py-4"
        />
        <ModuleConsole :debuggerInfo="debuggerInfo" class="flex-1 bg-arco-2" @run="checkModule" />
      </div>
    </div>
  </div>
</template>
